<template>
  <div class="listDemo flex">
    <div class="common_modal mainTreeBox flex-shrink0" v-show="treeModalShow">
      <div class="common_title">
        <span>组织结构</span>
        <div class="common_title_right">
          <span
            class="icon el-icon-arrow-down operTreeNode"
            :class="showAllNode ? 'up' : ''"
            @click="showAllTreeNode"
          ></span>
          <span class="icon el-icon-refresh" @click="loadTreeData"></span>
        </div>
      </div>
      <div class="treeBox">
        <el-tree
          v-if="refreshTable"
          :data="treeData"
          node-key="id"
          :default-expand-all="showAllNode"
          :default-expanded-keys="defaultShowNodes"
          :props="defaultProps"
          @node-click="chooseNode"
        >
        </el-tree>
      </div>
    </div>
    <div class="common_modal flex-1 list_modal">
      <div class="showTreeModal" @click="operTreeShow">
        <span class="iconfont" :class="treeModalShow?'icon-shouqi':'icon-zhankai'"></span>
      </div>
      <search-box @search="searchForm">
        <div slot="rightBtn" class="right flex-1 text_right">
          <el-button type="success">新增</el-button>
        </div>
        <el-form
          slot="searchMain"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </search-box>
      <div class="listBox m_t_15">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="headCell"
        >
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.age }}</span>
            </template>
          </el-table-column>
          <el-table-column label="住址" width="300">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工作年限" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.works }}</span>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          class="pageBox"
          :page-size="pageSize"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from "@/components/searchBox.vue";
export default {
  components: {
    SearchBox,
  },
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      headCell: {
        background: "#f8f8f8",
      },
      pageSize: 10,
      tableData: [
        {
          date: "2016-05-02",
          age: 28,
          works: "2年",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          age: 28,
          works: "2年",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          age: 28,
          works: "2年",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 28,
          works: "2年",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      treeModalShow:true,
      //树节点展示刷新
      refreshTable: true,
      showAllNode: true, //展开所有节点
      //默认展开节点
      defaultShowNodes: [],
    };
  },
  methods: {
    searchForm(obj) {},
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    currentChange(val) {
      //根据当前页去加载数据
      console.log(`当前页: ${val}`);
    },
    /**选择组织结构 */
    chooseNode(obj) {
      console.log(obj);
    },
    /**展示全部节点 */
    showAllTreeNode() {
      this.refreshTable = false;
      if (this.showAllNode) {
        this.showAllNode = false;
      } else {
        this.showAllNode = true;
      }
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /**刷新树节点数据 */
    loadTreeData() {
      this.$message({
        message: "刷新树数据",
        type: "success",
      });
    },
    /**控制数的显示与隐藏 */
    operTreeShow(){
      this.treeModalShow = !this.treeModalShow
    },
  },
};
</script>

<style lang="less" scoped>
.mainTreeBox {
  margin-right: 15px;
  width: 200px;
  .treeBox {
    margin-top: 15px;
  }
  .operTreeNode {
    transition: all 0.3s;
    &.up {
      transform: rotate(180deg);
    }
  }
}
.list_modal{
  width: 50%;
}
.showTreeModal{
  position: absolute;
  left:-14px;
  top:30%;
  color:#E6A23C;
  cursor: pointer;
}
</style>
